<template>
	<view class="fun-item">
		<view class="title">{{ title }}</view>
		<view class="desc">{{desc}}</view>
		<image class="icon" :src="icon" mode="aspectFill"></image>
	</view>
</template>

<script setup>
	defineProps({
		title: {
			type: String,
			default: ''
		},
		desc: {
			type: String,
			default: ''
		},
		icon: {
			type: String,
			default: ''
		}
	})
</script>

<style lang="scss" scoped>
	.fun-item {
		width: 313rpx;
		height: 351rpx;
		background: white;
		box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(132, 148, 183, 0.12);
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		padding: 48rpx 32rpx 32rpx 32rpx;
		justify-content: space-between;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
		}

		.desc {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #999;
			font-weight: 400;
		}

		.icon {
			margin-top: 20rpx;
			width: 72rpx;
			height: 96rpx;
		}
	}
</style>